<template>
    <div class='content'>
        <div class="profile_page">
                <head-top  :go-back='goBack'  :head-title="profiletitle"></head-top>
        </div>
        <div class="formContain" v-if="baseInfo">
            <titlebar :title-left='titleLeft'></titlebar>
            <ul>
                <li class="flex">
                    <span class="label">姓名</span>
                    <div>
                        <span>{{selfPersonInfo.name}}</span>
                    </div>
                </li>
                 <li class="flex">
                    <span class="label">工号</span>
                    <div>
                        <span>{{selfPersonInfo.card}}</span>
                    </div>
                </li>
                  <li class="flex">
                     <span class="label">公司</span>
                    <div>
                        <span>{{selfPersonInfo.org}}</span>
                    </div>
                </li>
                 <li class="flex">
                    <span class="label">区域</span>
                    <div>
                        <span>{{selfPersonInfo.city}}</span>
                    </div>
                </li>
                <li class="flex">
                    <span class="label">项目</span>
                    <div>
                        <span>{{selfPersonInfo.project}}</span>
                    </div>
                </li>
                <li class="flex">
                    <span class="label">部门</span>
                    <div>
                        <span>{{selfPersonInfo.dept}}</span>
                    </div>
                </li>
                <li class="flex">
                    <span class="label">岗位</span>
                    <div>
                        <span>{{selfPersonInfo.post}}</span>
                    </div>
                </li>
            </ul>

        </div>
     <!-- :myactdata="myactdata"-->
        <router-view  :isFirstTask="isFirstTask" :procInstanceId="procInstanceId" @childactdata="childactdata" @resulttype="resulttype"></router-view>
          <div class="formContain">
            <titlebar :title-left='titleLeft1'></titlebar>
            <table>
                <tr>
                    <td>审批人</td>
                    <td>审批决策</td>
                    <td>时间</td>
                </tr>
              <tr v-for="item in approvalHistory" v-if="item.assignee!= null&&item.text!= null">
                <td>{{item.assignee}}</td>
                <td>{{item.text.substr(1,2)}}</td>
                <td>{{item.endTime.substr(0,10)}}</td>
              </tr>
            </table>
         </div>
          <div class="formContain" v-if="isFirstTask == '00900'">
            <titlebar :title-left='titleLeft2'></titlebar>
            <ul>
                <li class="flex">
                  <van-cell-group>
                    <i class="require">*</i>
                    <van-field
                      v-model="approveMessage"
                      type="textarea"
                      placeholder="请输入审批意见"
                      rows="4"
                      autosize
                      class="options"
                    />
                  </van-cell-group>
                </li>
            </ul>
         </div>
         <div class="align_center foot-button" v-if="isFirstTask == '00900'">
            <van-button class="cancel-btn" type="primary" @click="reject">驳回</van-button>
            <van-button class="primary-btn" type="primary" @click="getPast">通过</van-button>
         </div>
        <div class="align_center foot-button" v-if="isFirstTask == '00901'">
          <van-button class="cancel-btn" type="primary" @click="$router.go(-1)">取消</van-button>
          <van-button class="primary-btn" type="primary" @click="submitData">提交</van-button>
        </div>
        <van-picker id="picker"   show-toolbar  :title="title" v-show='pickershow' :columns="columns" @cancel="onCancel" @confirm="onConfirm" />
        <van-datetime-picker v-show='show' id="datetime-picker" type="date" @confirm="datetimeSelect" @cancel='cancel' v-model="currentTime" />
    </div>
</template>

<script>
    import headTop from '@/components/header/head'
    import titlebar from '@/components/titlebar3/titlebar3';
    import {toHandlePage,actdata,hisTaskList,vehicle,selfPersonInfo,submitFormByCustom,saveActAtndBusiness,handleTask,saveLeave,handleAndClaim,saveActAtndGoOut,saveActForgetClock,saveOvertime,overTimeType,makeUpType,saveBreakOff,breakOffType,saveClassChange} from '@/service/getData';
    import {getStore,getDefault} from '@/assets/config/mUtils';
    import { Dialog,Toast } from 'vant';
    export default {
    	data(){
            return{
                profiletitle:'审批',
                goBack:true,
                titleLeft:'基本信息',
                titleLeft1:'审批历史',
                titleLeft2:'审批意见',
                titleRight:'详情请查询PC端',
                show:false, //控制日期显示隐藏
                pickershow:false,//控制下拉选显示隐藏
                pickerName:'',//当前控制日期的控件
                currentTime:new Date(),
                baseInfo:true,
                approveMessage:'',
                processInstanceId:'',
                processRespondentUserId:'',
                procInstanceId:'',//调用数据传的id
                isClaim:'',//为true   调用签收并审批接口  为false  调用审批接口
                isFirstTask:'',//00900 走审批接口,00901 是驳回走提交接口
                taskId:'',
                processDefintionKey:'',
                datas:{

                },
                actdatas:'',
                title:'标题',//下拉框标题
                columns:[] ,//下拉框数据,
                list:[],
                approvalHistory :[],
                selfPersonInfo:{},
                result:[],
                overTimelist:[],
                overTimecolumns:[],
                breakOffColumns:[]
            }
        },
        created(){
    	    var defaultData = getDefault();
          vehicle(defaultData).then(res=>{
            this.list = res.data["3220"];
          });

          //vehicle().then(res=>{
            //this.columns = res.data["3220"];
            this.processInstanceId = this.$route.query.processInstanceId;
            this.taskId = this.$route.query.taskId;
            this.processDefintionKey = this.$route.query.processDefinitionKey;
          if(this.$route.query.processDefinitionKey=="commonTheProcess"||this.$route.query.processDefinitionKey=="overTimeBatchTheProcess"||this.$route.query.processDefinitionKey =="postEstablishmentKey"||this.$route.query.processDefinitionKey=="orgAddKey"||this.$route.query.processDefinitionKey=="inductionTheProcess"){
              this.baseInfo = false;
            }
            var data = {};
            data.procInstanceId = this.processInstanceId;
            this.procInstanceId = this.processInstanceId;
            data.taskId = this.taskId;
            data.app_userId = getStore('user_id');
            data.CHECK_TIME = new Date().getTime();
            data.CHECK_SIGN = this.$md5(data.app_userId + data.CHECK_TIME +"3a28fba00c015e0df7f88556c91cb7fc");
            toHandlePage(data).then(res=>{
              console.log(res.data,"3333333333333");
              var result = res.data;
              this.procInstanceId = result.procInstanceId;
              this.isClaim = result.isClaim;
              this.isFirstTask = result.isFirstTask;
              this.processRespondentUserId = result.processRespondentUserId;
              var actData = {};
              actData.procInstanceId = this.procInstanceId;
              actData.processRespondentUserId = this.processRespondentUserId;
              actData.app_userId = getStore('user_id');
              actData.CHECK_TIME = new Date().getTime();
              actData.CHECK_SIGN = this.$md5(actData.app_userId + actData.CHECK_TIME +"3a28fba00c015e0df7f88556c91cb7fc");
           /*   actdata(actData).then(res=>{
                var resData = res.data.datas[0];
                for(let i= 0 ;i<this.columns.length;i++){
                  var columId = this.columns[i].id;
                  if(columId == resData.vehicle){
                    resData.vehicles = this.columns[i];
                  }
                };
                this.actdatas = resData;

              })*/
              if(this.processDefintionKey == "overTimeTheProcess"){
                /*加班类型*/
                overTimeType(data).then(res=>{
                  this.overTimelist = res.data["3223"];
                });
                /*补偿方式*/
                makeUpType(data).then(res=>{
                  console.log(res);
                  this.overTimecolumns = res.data["3224"];
                });
              }
              if(this.processDefintionKey == "breakOffTheOff"){
                breakOffType(data).then(res=>{
                  this.breakOffColumns = res.data["3225"];
                });
              }


              hisTaskList (actData).then(res=>{
                this.approvalHistory  = res.data.data;
              });
              selfPersonInfo(actData).then(res=>{
                console.log(res,"个人信息");
                this.selfPersonInfo = res.data;
              })
            })
         // });

        },
        mounted(){
        },
        components:{
            headTop,
            titlebar
        },
        computed:{
          myactdata:function () {
            return this.actdatas
          },
        },
        methods:{
            findId(data,curName){
              for(var i=0;i<data.length;i++){
                if(data[i].text == curName){
                  return data[i].id;
                }
              }
            },
            datetimeSelect(value){
                this.show = false;
                var date =  new Date(value);
                var val = date.getFullYear() + '-'+(date.getMonth()+1) + '-'+ date.getDate();
                this.$set(this.datas,this.pickerName,val)
                // document.getElementById(this.pickerName).value = val;
            },
            onConfirm(value){
                this.$set(this.datas,this.pickerName,value);
                 this.pickershow = false;
            },
            cancel() {
                this.show = false;
            },
            onCancel(){
                this.pickershow = false;
            },
            showdatepicker(event,name){
                this.show = true;
                this.pickerName = name;
            },
            showpicker(event,name,title){
                this.pickershow = true;
                this.pickerName = name;
                this.title = title;
            },
           childactdata(val){
               this.actdatas = val;
            },
            resulttype(val){
              this.result = val;
            },
            againSubmit(dataId,day,bsTable,pDefinKey){
             //再次提交
              var data = {};
              data.bussinessIds = dataId;
              data.app_userId = getStore('user_id');
              data.processRespondentUserId = this.processRespondentUserId;
              data.processType = "KQ";
              data.day = day;
              data.CHECK_TIME = new Date().getTime();
              data.CHECK_SIGN = this.$md5(data.app_userId + data.CHECK_TIME +"3a28fba00c015e0df7f88556c91cb7fc");
              data.bussinessTable = bsTable;
              data.processDefinitionKey = pDefinKey;
              data.taskId = this.taskId;
              data.procInstanceId = this.processInstanceId;
              data.submitToParentFlag = "00900";
              data.procInstanceIdStatus = "9050000002";
              submitFormByCustom(data).then(res=>{
                console.log(res,"11111111111111");
                if(res.code == 200){
                  Toast.clear();
                 Dialog.alert({
                    title: '提示',
                    message: '提交审批成功'
                  }).then(() => {
                    this.$router.go(-1);
                  });
                }else {
                  Toast.clear();
                }
              })
            },
            submitData(){
              //再次提交保存数据
              Toast.loading({
                duration: 0,   // 持续展示 toast
                mask: true,
                message: '正在提交...'
              });
              var actData = {};
              actData.procInstanceId = this.procInstanceId;
              actData.app_userId = getStore('user_id');
              actData.CHECK_TIME = new Date().getTime();
              actData.CHECK_SIGN = this.$md5(actData.app_userId + actData.CHECK_TIME +"3a28fba00c015e0df7f88556c91cb7fc");
              console.log(this.processDefintionKey);
              if(this.processDefintionKey == "businessTheProcess"){
                console.log(this.actdatas);
                var actAtndBusiness = this.actdatas;
                actAtndBusiness.applyUser = getStore('user_id');
                actAtndBusiness.processInstanceId = this.processInstanceId;
                actAtndBusiness.app_userId = getStore('user_id');
                actAtndBusiness.CHECK_TIME = new Date().getTime();
                actAtndBusiness.CHECK_SIGN = this.$md5(actAtndBusiness.app_userId + actAtndBusiness.CHECK_TIME +"3a28fba00c015e0df7f88556c91cb7fc");
                var vehicletye = [];
                for(var i=0,len = this.list.length;i<len;i++){
                  var curlist = this.list[i];
                  for(var j=0,len1=this.result.length;j<len1;j++){
                    var curresult = this.result[j];
                    if(curlist.text == curresult){
                      vehicletye.push(curlist.id)
                    }
                  }
                };
                vehicletye  = vehicletye.join(",");
                actAtndBusiness.vehicle = vehicletye;
                /* /!*附件上传做好以后就删掉*!/
                 actAtndBusiness.fileId ='ewrwr477271419DBE21C52C3E27BF4A',*/
                saveActAtndBusiness(actAtndBusiness).then(res=>{
                  //console.log(res,"123");
                  if(res.code == 200){
                   this.againSubmit(res.data,this.actdatas.businessAmount,'ACT_ATND_BUSINESS','businessTheProcess');
                    //console.log(data);
                  }else if(res.code==400){
                    Toast.clear();
                    Dialog.alert({
                      title: '提示',
                      message: res.msg
                    })
                  }
                })
              }else if(this.processDefintionKey == "leaveTheProcess"){
                var savaLeaveDatas = this.actdatas;
                savaLeaveDatas.processInstanceId = this.processInstanceId;
                savaLeaveDatas.applyUser = getStore('user_id');
                savaLeaveDatas.app_userId = getStore('user_id');
                savaLeaveDatas.CHECK_TIME = new Date().getTime();
                savaLeaveDatas.CHECK_SIGN = this.$md5(savaLeaveDatas.app_userId + savaLeaveDatas.CHECK_TIME +"3a28fba00c015e0df7f88556c91cb7fc");
                savaLeaveDatas.leaveName = this.actdatas.leaveNames.id;
               /* /!*附件上传做好以后就删掉*!/
                savaLeaveDatas.attachmentId ='ewrwr477271419DBE21C52C3E27BF4A';*/
                saveLeave(savaLeaveDatas).then(res=>{
                    console.log(res,"123");
                    if(res.code == 200){
                      this.againSubmit(res.data,this.actdatas.leaveAmount,'ACT_ATND_LEAVE','leaveTheProcess');
                      //console.log(data);
                    }else if(res.code==400){
                      Toast.clear();
                      Dialog.alert({
                        title: '提示',
                        message: res.msg
                      })
                    }
                  })
              }else if(this.processDefintionKey == "goOutTheProcess"){
                var data = this.actdatas;
                data.processInstanceId = this.processInstanceId;
                data.applyUser = getStore('user_id');
                data.app_userId = getStore('user_id');
                data.CHECK_TIME = new Date().getTime();
                data.CHECK_SIGN = this.$md5(data.app_userId + data.CHECK_TIME +"3a28fba00c015e0df7f88556c91cb7fc");
              /*  /!*附件上传做好以后就删掉*!/
                data.attFileId ='ewrwr477271419DBE21C52C3E27BF4A';*/
                saveActAtndGoOut(data).then(res=>{
                  console.log(res,"123");
                  if(res.code == 200){
                    this.againSubmit(res.data,this.actdatas.amount,'ACT_ATND_GO_OUT','goOutTheProcess');
                    //console.log(data);
                  }else if(res.code==400){
                    Toast.clear();
                    Dialog.alert({
                      title: '提示',
                      message: res.msg
                    })
                  }
                })
              }else if(this.processDefintionKey == "supplementCardProcess"){
                var saveData = this.actdatas;
                saveData.processInstanceId = this.processInstanceId;
                saveData.applyUser = getStore('user_id');
                saveData.app_userId = getStore('user_id');
                saveData.CHECK_TIME = new Date().getTime();
                saveData.CHECK_SIGN = this.$md5(saveData.app_userId + saveData.CHECK_TIME +"3a28fba00c015e0df7f88556c91cb7fc");
              /*  /!*附件上传做好以后就删掉*!/
                saveData.attFileId ='ewrwr477271419DBE21C52C3E27BF4A';*/
                //saveData.suppTime ='9:00';
                saveActForgetClock(saveData).then(res=>{
                  console.log(res,"123");
                  if(res.code == 200){
//                    if(this.selfPersonInfo.org.indexOf("商业")>-1){
//                      this.againSubmit(res.data,'4','ACT_ATND_SUPPLEMENT_CARD','supplementCardProcess');
//                    }else {
//                      this.againSubmit(res.data,'1','ACT_ATND_SUPPLEMENT_CARD','supplementCardProcess');
//                    }
                    this.againSubmit(res.data,'1','ACT_ATND_SUPPLEMENT_CARD','supplementCardProcess');
                  }else if(res.code==400){
                    Toast.clear();
                    Dialog.alert({
                      title: '提示',
                      message: res.msg
                    })
                  }
                })
              }else if(this.processDefintionKey == "overTimeTheProcess"){
                var saveData = this.actdatas;
                saveData.processInstanceId = this.processInstanceId;
                saveData.applyUser = getStore('user_id');
                saveData.app_userId = getStore('user_id');
                saveData.CHECK_TIME = new Date().getTime();
                saveData.CHECK_SIGN = this.$md5(saveData.app_userId + saveData.CHECK_TIME +"3a28fba00c015e0df7f88556c91cb7fc");
                saveData.otType = this.findId(this.overTimelist,saveData.overTimeType);
                saveData.compensateType = this.findId(this.overTimecolumns,saveData.compensType);
                console.log(saveData,"加班");
                if(saveData.otAmount<2){
                  Toast.clear();
                  Dialog.alert({
                    title: '',
                    message: '加班时长最小为2小时'
                  });
                }else {
                  saveOvertime(saveData).then(res=>{
                    console.log(res,"123");
                    if(res.code == 200){
                      this.againSubmit(res.data,(this.actdatas.otAmount)/8,'ACT_ATND_OVERTIME','overTimeTheProcess');
                    }else if(res.code==400){
                      Toast.clear();
                      Dialog.alert({
                        title: '提示',
                        message: res.msg
                      })
                    }
                  })
                }

              }else if(this.processDefintionKey == "breakOffTheOff"){
                var saveData = this.actdatas;
                saveData.processInstanceId = this.processInstanceId;
                saveData.applyUser = getStore('user_id');
                saveData.app_userId = getStore('user_id');
                saveData.CHECK_TIME = new Date().getTime();
                saveData.CHECK_SIGN = this.$md5(saveData.app_userId + saveData.CHECK_TIME +"3a28fba00c015e0df7f88556c91cb7fc");
                saveData.offType = this.findId(this.breakOffColumns,saveData.offTypeName);
                console.log(saveData,"调休");
                if(saveData.offAmountRemain < saveData.offAmount){
                  Toast.clear();
                  Dialog.alert({
                    title: '提示',
                    message: '剩余调休时长不足'
                  })
                }else if(saveData.offAmount == 0){
                  Toast.clear();
                  Dialog.alert({
                    title: '提示',
                    message: '调休时长不能为0'
                  })
                }else {
                  saveBreakOff(saveData).then(res=>{
                    console.log(res,"123");
                    if(res.code == 200){
                      this.againSubmit(res.data,(this.actdatas.offAmount)/8,'ACT_ATND_BREAK_OFF','breakOffTheOff');
                      //console.log(data);
                    }else if(res.code==400){
                      Toast.clear();
                      Dialog.alert({
                        title: '提示',
                        message: res.msg
                      })
                    }
                  })
                }

              }else if(this.processDefintionKey == "classChangeTheProcess"){
                var saveData = this.actdatas;
                saveData.processInstanceId = this.processInstanceId;
                saveData.applyUser = getStore('user_id');
                saveData.app_userId = getStore('user_id');
                saveData.CHECK_TIME = new Date().getTime();
                saveData.CHECK_SIGN = this.$md5(saveData.app_userId + saveData.CHECK_TIME +"3a28fba00c015e0df7f88556c91cb7fc");
                saveData.offType = this.findId(this.breakOffColumns,saveData.offTypeName);
                console.log(saveData,"调班");
                saveClassChange(saveData).then(res=>{
                  console.log(res,"123");
                  if(res.code == 200){
                    this.againSubmit(res.data,this.actdatas.changeDaysOld,'ACT_ATND_CLASS_CHANGE','classChangeTheProcess');
                    //console.log(data);
                  }else if(res.code==400){
                    Toast.clear();
                    Dialog.alert({
                      title: '提示',
                      message: res.msg
                    })
                  }
                })
              }
              /*submitFormByCustom().then(res=>{

              });*/
            },
          //通过
          getPast(){
             this.approveMessage = this.approveMessage?this.approveMessage:'同意';
            var approveMessages = this.approveMessage;
            if(approveMessages!=''){
              Toast.loading({
                duration: 0,   // 持续展示 toast
                mask: true,
                message: '正在提交...'
              });
              var actData = {};
              actData.procInstanceId = this.procInstanceId;
              actData.taskId = this.taskId;
              actData.opinion = approveMessages;
              actData.msg = "yes";
              actData.procInstanceIdStatus = "90500002";
              //actData.submitToPerson = window.localStorage.getItem("submitToPerson")||"";
              actData.app_userId = getStore('user_id');
              actData.CHECK_TIME = new Date().getTime();
              actData.CHECK_SIGN = this.$md5(actData.app_userId + actData.CHECK_TIME +"3a28fba00c015e0df7f88556c91cb7fc");
//              console.log(actData,"1111111111111111111");
              if(!this.isClaim){
                handleTask(actData).then(res=>{
                  console.log(res);
                  if(res.code == 200){
                    Toast.clear();
                    Dialog.alert({
                      title: '提示',
                      message: "通过成功"
                    }).then(() => {
                      //window.localStorage.removeItem("submitToPerson");
                      this.$router.go(-1);
                    });
                  }else {
                    Toast.clear();
                    Dialog.alert({
                      title: '提示',
                      message: "通过失败"
                    }).then(() => {
                      //window.localStorage.removeItem("submitToPerson");
                      this.$router.go(-1);
                    });
                  }
                })
              }else {
                handleAndClaim(actData).then(res=>{
                  if(res.code == 200){
                    Toast.clear();
                    Dialog.alert({
                      title: '提示',
                      message: "通过成功"
                    }).then(() => {
                      //window.localStorage.removeItem("submitToPerson");
                      this.$router.go(-1);
                    });
                  }else {
                    Toast.clear();
                    Dialog.alert({
                      title: '提示',
                      message: "通过失败"
                    }).then(() => {
                      //window.localStorage.removeItem("submitToPerson");
                      this.$router.go(-1);
                    });
                  }
//                  console.log(res);
                })
              }
            }else {
              Dialog.alert({
                title: '提示',
                message: "审批意见不能为空"
              })
            }

          },
          //驳回
          reject(){
            this.approveMessage = this.approveMessage?this.approveMessage:'不同意';
            var approveMessages = this.approveMessage;
            if(approveMessages!=''){
              Toast.loading({
                duration: 0,   // 持续展示 toast
                mask: true,
                message: '正在提交...'
              });
              var actData = {};
              actData.procInstanceId = this.procInstanceId;
              actData.taskId = this.taskId;
              actData.opinion = approveMessages;
              actData.msg = "no";
              actData.procInstanceIdStatus = "90500003";
              actData.app_userId = getStore('user_id');
              actData.CHECK_TIME = new Date().getTime();
              actData.CHECK_SIGN = this.$md5(actData.app_userId + actData.CHECK_TIME +"3a28fba00c015e0df7f88556c91cb7fc");
              //console.log(this.isClaim);
              if(!this.isClaim){
                handleTask(actData).then(res=>{
                  console.log(res);
                  if(res.code == 200){
                    Toast.clear();
                    Dialog.alert({
                      title: '提示',
                      message: "驳回成功"
                    }).then(() => {
                      this.$router.go(-1);
                    });
                  }else {
                    Toast.clear();
                    Dialog.alert({
                      title: '提示',
                      message: "驳回失败"
                    }).then(() => {
                      this.$router.go(-1);
                    });
                  }
                })
              }else {
                handleAndClaim(actData).then(res=>{
                  console.log(res);
                  if(res.code == 200){
                    Toast.clear();
                    Dialog.alert({
                      title: '提示',
                      message: "驳回成功"
                    }).then(() => {
                      this.$router.go(-1);
                    });
                  }else {
                    Toast.clear();
                    Dialog.alert({
                      title: '提示',
                      message: "驳回失败"
                    }).then(() => {
                      this.$router.go(-1);
                    });
                  }
                })
              }
            }else {
              Dialog.alert({
                title: '提示',
                message: "审批意见不能为空"
              })
            }

          }
        }
    }

</script>

<style lang="scss" scoped>
      @import '../../assets/style/mixin';
      @import '../../assets/style/public';
    .formContain{
        background: #fff;
        >table{
            width: 100%;
            border-collapse: collapse;
            td{
                font-size: .56rem;
                color: #444;
                border-bottom: 1px solid #e0e0e0;
                line-height: 2rem;
                text-align: center;
                width: 33.3%;
            }
        }

        ul{
            padding: 0 .54rem;
            .flex{
                justify-content: space-between;
                align-items: center;
                line-height: 2rem;
                border-bottom: 1px solid #e0e0e0;
                padding: 0 .3rem;
                &:nth-last-of-type(1){
                    border: none;
                }
                .label{
                    font-size: .56rem;
                    line-height: 2rem;
                    color: #333333;
                }
                .opinion{
                    width:100%;
                    font-size: .56rem;
                    font-weight: normal;
                    font-stretch: normal;
                    line-height: 1.2rem;
                    letter-spacing: 0px;
                    color: #666666;
                    padding-bottom: .3rem;
                }
                div{
                    display: flex;
                    justify-content: flex-end;
                    align-items: center;
                    position: relative;
                    flex-grow: 1;
                    span{
                        font-size: .56rem;
                        color: #333;
                    }
                    img{
                        width: .68rem;
                        height: .64rem;
                    }
                    input{
                        color: #323233;
                        text-align: right;
                        font-size: .48rem;
                        padding-right: .48rem;
                        border: none;
                        &:-ms-input-placeholder{
                             color: #aaa;
                             font-size: .48rem;

                        }
                    }
                    .file{
                        width: 2rem;
                        height: 1rem;
                        font-size: 10rem;
                        opacity: 0;
                        position: absolute;
                        right: 0;
                    }
                    .van-cell{
                        font-size: .48rem;
                        padding-right: .48rem;
                        padding: 0;
                        color: #aaa;
                        .van-field__control{
                            color: #aaa;
                        }
                    }

                }
            }
        }
    }
    .foot-button{
        margin-top: 2rem;
        padding-bottom: .5rem;
        .cancel-btn{
            margin-right: 1rem;
        }
    }
    #datetime-picker,#picker{
        position: fixed;
        width: 100%;
        bottom: 0;
    }
      .require{
        color: red;
        margin-right: 4px;
        font-style: inherit;
        font-size: 14px;
        margin-top: -61px;
      }
</style>
